<template>
	<div class="enquiry-quotation">
		<!-- <div class="page-top" v-if="this.$store.state.options.user.oda.notice != null">
			<dl class="notice">
				<dt><img src="../../../static/images/notice-red-mini.png" /></dt>
				<dd @click="$router.push('/public/message-detail?id=' + $store.state.options.user.oda.notice.id)">{{ $store.state.options.user.oda.notice.title }}</dd>
			</dl>
		</div> -->
        <div v-show="pga > 0" @click="eventGoBackOperate" class="goback-button">返回上一级</div>
        <van-list v-model="dataset.loading" :finished="dataset.finished" finished-text="没有更多了" @load="controllerRequestOfferList">
            <dl v-for="(item, index) in dataset.items" :key="index" class="offer-list-wrap">
                <dt class="title">
                    <div>{{ item.name }}</div>
                    <div>
                        <p v-for="(itema, indexa) in item.danwei" :key="indexa"><span>￥{{ itema.price }}</span><span>/{{ itema.danweiming }}</span></p>
                    </div>
                </dt>
                <!-- <dd v-if="item.price!=undefined&&item.price.length > 0" class="unit">
                    <p><span>{{ item.price[0].weight }}kg</span><span>/元</span></p>
                    <p><span>{{ item.price[0].number }}个</span><span>/元</span></p>
                </dd> -->
                <dd class="button">
                    <img src="../../../static/images/folder.png" />
                    <span @click="pga = item.id">进入下级</span>
                </dd>
            </dl>
        </van-list>
		<tab-group v-if="$store.state.options.user.oda.groupid != 7" :dataset="navButtonGroup" :index="2" identity="2" />
	</div>
</template>

<script>
	import { Cell, CellGroup, List } from 'vant';

	import TabGroup from "../../components/currency/tab/tab.vue";

	export default {
		name: "EnquiryQuotation",
		components: {
            TabGroup,
            [List.name]: List
		},
		data() {
			return {
                pga: 0, pgaList: [],
				navButtonGroup: [
					{
						name: "门店订单", route: { path: '/salesman/index' }
					},
					{
						name: "待取点", route: { path: '/salesman/waiting-point-map' }
					},
					{
						name: "查询报价", route: { path: '/salesman/enquiry-quotation' }
					},
					{
						name: "个人中心", route: { path: '/salesman/personal-center' }
					}
                ],
                dataset: {
                    page: 0, limit: 30,
                    loading: false, finished: false,
                    items: []
                }
			}
        },
        methods: {
            controllerRequestOfferList() {
                var url = '/api/home/garbage/getlist',
                    params = {
                        page: this.dataset.page,
                        list_rows: this.dataset.limit,
                        pga: 0
                        // token: this.$store.state.options.user.token,
                        // status: 1
                    };

                if(this.pga > 0) params.pga = this.pga;
                
                this.$util.postRequestInterface(url, params, (res) => {
                    this.dataset.items = res.data.data;

                    if(this.dataset.items.length >= res.data.count) this.dataset.finished = true;
                    this.dataset.loading = false;
                });
            },
            eventGoBackOperate() {
                this.pga = this.pgaList.pop() || 0;
            }
        },
        watch: {
            pga(nVal, oVal) {
                // console.log(nVal, oVal);

                if(this.pgaList.indexOf(nVal) < 0 && nVal > 0) this.pgaList.push(nVal);
                // console.log(this.pgaList);
                
                this.dataset.page = 0;
                this.dataset.items = [];
                this.dataset.finished = false;
                this.dataset.loading = false;

                // this.controllerRequestOfferList();
            }
        }
	}
</script>

<style lang="scss" scoped>
	.page-top {
		width: 100%;
		height: 3rem;
		position: relative;

		.notice {
			position: absolute;
			top: 0rem;
			width: 100%;
			margin: 0rem;
			padding: 0.7rem 1rem;
			display: flex;
			background: rgba(255, 247, 209, 1);
			z-index: 1;
			box-sizing: border-box;
			dt {
				padding-right: 1rem;

				img {
					width: 1.4rem;
				}
			}
			dd {
				white-space: nowrap;
				flex: 1;
				margin: 0rem;
				padding: 0rem;
				color: #ff9000;
				font-size: 1.3rem;
			}
		}
	}

    .offer-list-wrap {
        padding: 0rem 1rem;
        border-bottom: 0.4rem solid #F4F4F4;

        .title {
            padding: 1.6rem 0rem 1rem;
        }

        .unit {
            display: flex;

            p {
                flex: 1;
                font-size: 1.4rem;

                span:first-child {
                    color: #FF0000;
                }
            }

            p:last-child {
                text-align: right;
            }
        }

        .button {
            text-align: right;
            font-size: 1.3rem;
            padding: 1.3rem 0rem;

            img {
                width: 1.7rem;
                vertical-align: middle;
                margin-right: 0.5rem;
            }

            span {
                position: relative;
                top: 1.5px;
            }
        }
    }

    .goback-button {
        background-color: #00CC00;
        padding: 1rem;
        color: #ffffff;
    }
</style>
